<!-- @author zhengjie -->
<template>
  <div class="navvz">

    <div class="row">
      <div class="logo1" style="margin-top: 100px;margin-left: 240px;z-index: 9999;">
        <!-- <img style="width:184px;height: 184px;" src="../../assets/images/logo1.png" /> -->
        <img style="width:184px;height: 184px;border-radius: 100px;" :src="avatar" />
      </div>

      <div>
        <div class="f_28 color_fff scxy" style="">{{username}}</div>
        <div class="row mt_30">
          <div class="color_fff   f_18" style="margin-right:50px;margin-left: 20px;">学号：{{user_id}}</div>
          <!-- <div class="color_fff  f_18">比奇币：385</div> -->
        </div>
      </div>

      <div class="row_a_c" style="margin-left: 500px;margin-top: 130px;">

        <div class="column_c">
          <div class="color_fff f_20">关注</div>
          <div class="color_fff f_20 mt_10">{{a_count}}</div>
        </div>

        <div class="column_c" style="margin-left: 45px;">
          <div class="color_fff f_20">收藏</div>
          <div class="color_fff f_20 mt_10">{{c_count}}</div>
        </div>

      </div>
    </div>



  </div>

</template>

<script>
  import * as Course from "@/api/operation/course";
  export default {
    name: 'Navvz',
    data() {
      return {
        loading:false,
        avatar: '',
        username: '',
        user_id: '',
        a_count: '',//关注
        c_count: '',//收藏
      }
    },



    created() {
      this.getgs(); //查询关注 收藏总数
      // 读取缓存
      this.username = localStorage.getItem('username')
      this.avatar = localStorage.getItem('avatar')
      this.user_id = localStorage.getItem('user_id')
    },

    methods: {
      /** 查询学习记录列表 */
      getgs() {
        this.loading = true;
        Course.getgs().then((response) => {
          this.a_count = response.data.a_count;
          this.c_count = response.data.c_count;
          this.loading = false;
        });
      },
    }
  }
</script>


<style lang="scss" scoped>
  .navvz {
    // position: relative;
    background-image: url("../../assets/images/bj1.png");
    background-size: cover;
    height: 260px;
    width: 100%;
  }

  .logo1 {
    margin-top: 100px;
    margin-left: 240px;

    width: 184px;
    height: 184px;
    background: #FFFFFF;
    box-shadow: 0px 0px 0px 6px rgba(5, 13, 27, 0.31);
    border-radius: 50%;
  }

  .scxy {
    margin-top: 100px;
    margin-left: 20px;
  }
</style>
